<!-- 详情页面 -->

<template>
  <div class="detail">
    <div class="detail-head">
      <i class="iconfont icon-zuojiantou" @click="$router.push('/seckill')"></i>
      <div>商品详情</div>
    </div>
    <div class="detail-out">
      <div class="detailmiddle">
        <dl class="middleDl">
          <dt>
            <img :src="article.img" alt="" />
          </dt>
          <dd>
            <h4 class="detailtitle">{{ article.title }}</h4>
            <p class="deatilContent">{{ article.content }}</p>
          </dd>
          <p class="boby">
            <span class="bobylook">宝贝评价(8080)</span>
            <span></span>
            <span class="look">查看全部 &gt;</span>
          </p>
        </dl>
        <!-- 评价 -->
        <div class="appraise">
          <p class="appraiseContent"></p>
          <dl class="appdl">
            <dt class="titleimg"><img :src="article.titleImg" alt="" /></dt>
            <dd>
              <p class="appContent">{{ article.appraiseConten }}</p>
            </dd>
          </dl>
        </div>
        <div class="allImg">
          <div class="allTitles">
            <div class="allside">
              <span @click="handApprise()">评价</span>
              <span>商品</span>
              <span>售后</span>
            </div>
          </div>
          <p>
            <img :src="article.img" alt="" />
          </p>
          <p>
            <img :src="article.titleImg" alt="" />
          </p>
          <p>
            <img :src="article.img" alt="" />
          </p>
        </div>
      </div>
    </div>
    <!-- 购物车图标 -->
    <div class="shopp">
      <dl @click="handShopss()">
        <dt class="iconfont icon-gouwuche2">
          <span class="num">{{ priceIndexList }}</span>
        </dt>
        <dd>购物车</dd>
      </dl>
    </div>
    <div class="detailbottom">
      <p class="addShop" @click="handShop()">加入购物车</p>
      <p class="money" @click="quickly_Buy">立即购买</p>
    </div>
  </div>
</template>

<script>
//购物车图标
import Vue from "vue";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import { mapMutations, mapState } from "vuex";
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      count: 0,
      shopList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["article", "list", "priceIndexList"]),
    //加入购物车
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapMutations(["SET_DATA_LIST_INDEX", "SET_INDEX_LIST", "SET_LIST_MAP"]),
    //立即购买
    quickly_Buy() {
      if (this.list.length) {
        this.$router.push("/payment");
      } else {
        alert("购物车无数据，请添加在支付");
      }
    },
    //跳转到购物车
    handShopss() {
      this.$router.push("/shopcar");
    },
    handShop() {
      let num = this.article.num;
      num += 1;
      this.count = num;
      if (num !== 0) {
        this.SET_DATA_LIST_INDEX(num);
      }
      this.SET_LIST_MAP(this.article);
    },
    //跳转到评价页面
    handApprise() {
      this.$router.push("/apprise");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //详情数据
    this.SET_INDEX_LIST(this.article);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.detail {
  height: 100vh;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.detail-head {
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.3125rem;
}
.detail-head div {
  width: 90%;
  text-align: center;
  font-weight: bold;
}
.detail-head i {
  font-size: 1.5rem;
}
.detail-out {
  width: 100%;
  height: 70rem;
  overflow: hidden;
  overflow-y: scroll;
}
.detailmiddle {
  width: 100%;
  height: 100rem;
  .middleDl {
    width: 100%;
    height: 33rem;
    dt {
      width: 100%;
      height: 21rem;
      img {
        width: 19rem;
        height: 18rem;
        margin: 1.6rem 1.8rem;
      }
    }
    dd {
      border-bottom: 1px solid #898989;
      padding: 0rem 2rem 2rem 0rem;
      .detailtitle {
        line-height: 2rem;
      }
      .deatilContent {
        line-height: 1.6rem;
        font-size: 0.8rem;
        text-indent: 2rem;
      }
    }
  }
  .boby {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    line-height: 3rem;
    padding: 0 0.4rem;
    .bobylook {
      font-weight: bold;
    }
    .look {
      color: orange;
      font-weight: bold;
    }
  }
}
.titleimg {
  width: 2rem;
  height: 2rem;
  margin-left: 0.6rem;
  margin-bottom: 0.4rem;
  margin-top: 1rem;
  img {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
  }
}
.appContent {
  font-size: 0.8rem;
  line-height: 1.4rem;
  color: #898989;
  font-weight: bold;
}
.allImg {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  position: relative;
  p {
    width: 100%;
    height: 24rem;
    margin: 0.6rem 0;
    img {
      width: 100%;
      height: 24rem;
    }
  }
}
.allside {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0;
  position: absolute;
  top: 15rem;
  left: 0;
  background: #fff;
  border: 1px solid #000;
}
.allTitles {
  font-size: 1rem;
  position: sticky;
  top: -15rem;
}
.detailbottom {
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .addShop {
    width: 12rem;
    height: 2rem;
    font-size: 1rem;
    background: orange;
    text-align: center;
    line-height: 2rem;
    color: #fff;
  }
  .money {
    width: 12rem;
    height: 2rem;
    font-size: 1rem;
    background: orangered;
    text-align: center;
    line-height: 2rem;
    color: #fff;
  }
}
.shopp {
  width: 4rem;
  height: 4rem;
  background: #ff7800;
  color: #fff;
  position: fixed;
  top: 28rem;
  right: 2.4rem;
  padding: 1rem 0rem;
  // line-height: 4rem;
  text-align: center;
  border-radius: 4rem;
  font-size: 0.8rem;
  .icon-gouwuche2 {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
  }
}
.num {
  width: 1.6rem;
  height: 1.6rem;
  background: orangered;
  border-radius: 2rem;
  font-size: 0.4rem;
  display: inline-block;
  color: #fff;
  border-radius: 1.6rem;
  line-height: 1.6rem;
  position: absolute;
  top: -0.4rem;
  right: -0.08rem;
}
</style>
